<template>
	<view class="topicView topicItem" v-if="isShowTopic" @click="goClassifyList(imgData._id,imgData.name)">
		<image class="topicImg" :src="imgData.picurl" mode="aspectFill"></image>
		<view class="lastUpDateTime">
			<text class="dotCss">·</text>
			{{timeDifference}}
		</view>
		<view class="TopicName">
			{{imgData.name}}
		</view>
	</view>

	<view class="topicView moreTopic" v-if="!isShowTopic" @click="goClassify">
		<image class="bdImg" src="../common/images/more.jpg" mode="aspectFill"></image>
		<view class="moreTopicItemText">
			<text>···</text>
			<text>更多</text>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'

	//定义父组件传过来的参数，是否显示topic：isShowTopic，topic的imgData格式类型
	const props = defineProps({
		isShowTopic: {
			type: Boolean,
			default: true
		},
		imgData: {
			type: Object,
			default: {
				updateTime: "时间戳",
				name: "可爱萌宠",
				picurl: '/LayOut/classify1.jpg'
			}
		}
	})

	//页面跳转
	function goClassify() {
		uni.switchTab({
			url: "/pages/classify/classify"
		})
	}

	function goClassifyList(id, name) {
		uni.navigateTo({
			url: `/pages/classifyList/classifyList?id=${id}&name=${name}`
		})
	}

	//计算显示上次更新时间
	const timeDifference = computed(() => {
		const hoursM = 3600000 //一小时的时间戳
		const dayM = 86400000 //一天的时间戳
		const weekM = 604800000 //一周的时间戳
		const monthM = 2592000000 //一个月的时间戳
		const yearM = 31104000000 //一年的时间戳

		const now = Date.now() // 现在的时间戳

		const timeM = now - props.imgData.updateTime

		if (timeM < hoursM)
			return '1小时内更新过'

		else if (timeM > hoursM && timeM < dayM)
			return `${Math.floor(timeM / hoursM)}小时前更新`

		else if (timeM > dayM && timeM < weekM)
			return `${Math.floor(timeM / dayM)}天前更新`

		else if (timeM > weekM && timeM < monthM)
			return `${Math.floor(timeM / weekM)}周前更新`

		else if (timeM > monthM && timeM < yearM)
			return `${Math.floor(timeM / monthM)}月前更新`

		else
			return `${timeM / yearM}年前更新`
	})
</script>

<style lang="scss" scoped>
	@mixin flexCenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.topicView {
		width: 220rpx;
		height: 336rpx;
		color: white;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		display: inline-block;
	}

	.topicItem {
		.topicImg {
			width: 100%;
			height: 100%;
		}

		.lastUpDateTime {
			position: absolute;
			left: 0;
			top: 0;
			height: 35rpx;
			padding: 0 20rpx;
			font-size: 17rpx;
			border-bottom-right-radius: 20rpx;
			background-color: #e98e74;
			@include flexCenter();

			.dotCss {
				font-weight: bold;
				margin-right: 8rpx;
			}
		}

		.TopicName {
			position: absolute;
			bottom: 0;
			height: 70rpx;
			left: 0;
			right: 0;
			font-weight: bold;
			font-size: 30rpx;
			@include flexCenter();
			background-color: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(20rpx);
		}
	}

	.moreTopic {
		.bdImg {
			width: 100%;
			height: 100%;
		}

		.moreTopicItemText {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			font-size: 35rpx;
			font-weight: bold;
			backdrop-filter: blur(20rpx);
			@include flexCenter();
			flex-direction: column;
		}
	}
</style>